<template>
	<view class="interactive-container">
		<CustomNav :nav-info="navInfo" />
		<view class="policy-container-top">
			<view class="policy-container-banner">
				<image style="width:100%" src="https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/activity/banner.png" mode="aspectFill"></image>
			</view>
		</view>
		<view>
			<uv-tabs :current="currentTab" :itemStyle="{ fontSize: '68rpx', height: '60rpx', fontWeight:'bold' }" :scrollable="false" :list="tabs" @click="changeTab"></uv-tabs>
			<view v-if="currentTab===0" class="mt-20" style="padding: 20rpx;">
				<ActivityCard v-for="(cd,idx) in activities" :data="cd" :class="{'mt-20' :idx>0}" :key="idx" @click.native="go2ActivityDetail"/>
			</view>
			<view v-if="currentTab===1" class="mt-20">
				<view class="view-center">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '../../components/CustomNav/index.vue'
	import ActivityCard from '../../components/ActivityCard2/index.vue'
	
	export default {
		components: { CustomNav, ActivityCard },
		data() {
			return {
				navInfo: {
					bg_color: 'transparent',
					color: "#000",
					name: '互动'
				},
				currentTab: 0,
				tabs:[{name: '精彩活动'},{name: '活动回顾'}],
				activities:[
					{
						url: 'https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/activity/activity1.png',
						title: '新能源、新生活',
						address: '地点：无锡市梁溪区',
						date: '时间：2023.11.01-2023.01.23'
					},
					{
						url: 'https://ltzn.oss-cn-zhangjiakou.aliyuncs.com/ren_cai_ji_tuan/activity/activity2.png',
						title: '人才夜市火热出摊',
						address: '地点：无锡市梁溪区',
						date: '时间：2023.11.01-2023.01.23'
					}
				]
			}
		},
		methods: {
			changeTab(item) {
				this.currentTab = item.index
			},
			go2ActivityDetail() {
				uni.navigateTo({
					url: '/pages/interactive/detail'
				})
			}
		}
	}
</script>

<style lang="scss">
.interactive-container {
	min-height: 100vh;
	background-color: #F4F6F8;
}
</style>
